import tool from "@/common/tool.js";
import ProduList from "@/components/subject/ProduList.vue";
class Menu {
  mixin = {
    components: {
      ProduList
    },
    name: "分类页",
    data() {
      return {
        navindex: 0,
        navList: [], //页面导航列表
        productList: [], //商品列表
        proTotal: 0, //商品总数
        showAll: false, //显示全部
        allMenuId: "", //一级分类id
        loading: false,
        pageTitle: "missyeah",
        menuIndex: 1, //当前所在层级，最高三级
      };
    },
    head() {
      return {
        title: this.menuInfo.seo_title||this.menuInfo.title,
        meta: [{
            hid: "keywords",
            name: "keywords",
            content: this.menuInfo.seo_keyword || 'missyeah',
          },
          {
            hid: "description",
            name: "description",
            content: this.menuInfo.seo_description || 'missyeah',
          },
        ],
        link: [{
          rel: "canonical",
          href: this.canonical || 'https://www.missyeah.com',
        }, ],
      }
    },
    async asyncData(that) {
      let canonical = "https://www.missyeah.com" + that.route.fullPath;
      let offset = that.route.query.offset == undefined ? 1 : that.route.query.offset; //分页页数
      let parent = that.route.query.parent == undefined ? 0 : that.route.query.parent; //分页页数
      let productList = [];
      let menuInfo = {
        title: "missyeah"
      };
      let pageTitle = "missyeah";
      let proTotal = 0;
      let menuIndex = 1;
      let form = {
        search: "",
        tag_names: "",
        category_id: that.route.params.id,
        price_start: "",
        price_end: "",
        page: offset,
        page_size: 20,
        order_field: "",
        order_by: "",
      }
      let
        resProList = {},
        resInfo = {},
        resParent = {}
      try {
        [resProList, resInfo, resParent] = await Promise.all([
          //分类商品列表
          that.store.dispatch("menu/productList", form),
          //分类详情
          that.store.dispatch("menu/menuInfo", {
            id: that.route.params.id
          }),
          //上级分类详情
          that.store.dispatch("menu/menuInfo", {
            id: parent
          }),
        ]);
      } catch (err) {
        console.log(err);
      }
      if (resProList.data) {
        productList = resProList.data.list;
        proTotal = resProList.data.paginatio.total;
      }
      if (resInfo.data) {
        if (resInfo.data.info) {
          resInfo.data.info.description = tool.clearEditInfo(resInfo.data.info.description);
          menuInfo = resInfo.data.info;
          if (parent != 0) {
            pageTitle = resParent.data.info.title;
          } else {
            menuIndex = 1;
            pageTitle = resInfo.data.info.title;
          }
        }
      }
      return {
        form,
        productList,
        menuInfo,
        proTotal,
        pageTitle,
        menuIndex,
        canonical
      }
    },
    computed: {
      menuList() {
        return this.$store.state.menu.menuList;
      },
    },
    watch: {
      menuList(data) {
        this.matchingNav(data);
      }
    },
    activated() {
      this.matchingNav(this.menuList);
    },
    methods: {
      //导航滚动到指定位置
      scrollNav(index) {
        let descrollLeft = 0;
        for (let i = 0; i < index; i++) {
          descrollLeft += this.$refs['nav' + i][0].clientWidth;
        }
        let scrollLeft = 0;
        if (this.navList && this.navList.length > 0) {
          let timer = setInterval(() => {
            scrollLeft = scrollLeft + 10;
            if (this.$refs.pageNav.scrollLeft != undefined) {
              this.$refs.pageNav.scrollLeft = scrollLeft;
            }
            if (scrollLeft >= descrollLeft - 20) {
              clearInterval(timer);
            }
          }, 10);
        }
      },
      //计算导航光标
      matchingNav(menuList) {
        let navList = []; //导航列表
        let navindex = 0; //导航所在光标
        let menuid = parseInt(this.$route.params.id); //分类id
        let allMenuId = ""; //allid
        let showAll = false; //当前是否在一级分类
        if (menuList.length != 0) {
          nav1: for (let i = 0; i < menuList.length; i++) {
            if (menuList[i].id == menuid) { //匹配到一级分类
              if (menuList[i].children) {
                navList = !menuList[i].children ? [] : menuList[i].children;
                navindex = 0;
                allMenuId = menuList[i].id;
                showAll = true;
                this.menuIndex = 1;
                break nav1;
              }
            };
            if (menuList[i].children) {
              nav2: for (let j = 0; j < menuList[i].children.length; j++) {
                if (menuList[i].children[j].id == menuid) { //匹配到二级分类
                  navList = !menuList[i].children[j].children ? [] : menuList[i].children[j].children;
                  navindex = 0;
                  allMenuId = menuList[i].children[j].id;
                  showAll = true;
                  this.menuIndex = 2;
                  break nav2;
                }
                if (menuList[i].children[j].children) {
                  nav3: for (let k = 0; k < menuList[i].children[j].children.length; k++) { //三级分类
                    if (menuList[i].children[j].children[k].id == menuid) {
                      navList = !menuList[i].children[j].children ? [] : menuList[i].children[j].children;
                      navindex = k;
                      allMenuId = menuList[i].children[j].id;
                      showAll = false;
                      this.menuIndex = 3;
                      break nav3;
                    }
                  }
                }
              }
            }
          }
        }
        this.navList = navList;
        this.allMenuId = allMenuId;
        this.showAll = showAll;
        this.navindex = navindex;
        this.$nextTick(() => { //移动光标到指定位置
          this.scrollNav(navindex);
        });
      },
      //点击分类
      clickNav(index) {
        this.showAll = false;
        this.navindex = index;
        if (this.menuIndex >= 2) {
          this.$router.push({
            path: "/makeup/" + this.navList[index].id + '/' + tool.urlCheckForMenuTitle(this.navList[index].title),
            query: {
              parent: this.allMenuId
            }
          })
        } else {
          this.$router.push({
            path: "/makeup/" + this.navList[index].id + '/' + tool.urlCheckForMenuTitle(this.navList[index].title),
          })
        }
      },
      //点击全部
      clickAll() {
        this.showAll = true;;
        this.$router.push({
          path: "/makeup/" + this.allMenuId + '/' + tool.urlCheckForMenuTitle(this.pageTitle),
        })
      },
      //获取商品列表
      getPorductList() {
        this.loading = true;
        this.$store.dispatch("menu/productList", this.form).then(res => {
          if (res.code == 0 && res.data != undefined) {
            this.loading = false;
            this.productList = res.data.list;
          }
        })
      },
      //切换页码
      pageChange(page) {
        this.loading = true;
        this.productList = [];
        this.form.page = page;
        this.$router.push({
          path: "/makeup/" + this.$route.params.id + '/' + tool.urlCheckForMenuTitle(this.pageTitle),
          query: {
            offset: page,
          },
        })
        this.getPorductList();
      },
    }
  }
}
export default new Menu();
